<template>
    <div class="home_wrap">
        <div class="left">
            <img src="@/assets/img/logo.png" alt="">
            <div class="pingtai">学生信息成绩管理平台</div>
        </div>
        <div class="right">
            <ul class="list">
                <li>常见问题</li>
                <li>安全中心</li>
                <li>客服</li>
                <li @click="goLogin">
                    {{info}}
                </li>
                <li @click="exit">退出</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default{
    computed:{
        info(){
            return this.$store.state.user_name ? this.$store.state.user_name:'登录'
        }
    },
    methods:{
        goLogin(){
            // 目的是点击该按钮跳转到登录页面
            // 当为用户名时再点击该标签能跳转到登录页面
            // 编程式路由导航
            // console.log('goLogin');
            // this.$router.push({
            //     name:'login',
            // })
            // 当登录成功之后再点击用户名是否还需要跳转到登录页面

            // 不是用户名时点击该标签 就不能跳转到登录页面 写跳转页面时就需要有条件判断
            // 判断条件为vuex 中state的用户名的值
            // 在组件当中如何读取到vuex state中的值 this.$store.state.user_name
            // if(!this.$store.state.user_name){
            //     this.$router.push({
            //         name:'login'
            //     })
            // }
            
            // 当没有用户名时点击进入登录  当有用户名时点击进入个人中心
            if(!this.$store.state.user_name){
                this.$router.push({
                    name:'login'
                })
            }else{
                this.$router.push({
                    name:'personalcenter'
                })
            }
        },
        exit(){
            // 退出的逻辑
            // 关闭当前的浏览器标签
            // 清除state当中的数据 localstorage sessionstorage
            // localstorage.clear();
            // sessionstorage.clear();
            window.open('about:blink','_self');
            window.close();
            
        }
    }
}
/*
进入学生信息管理平台的步骤：
注册
登录

用户名一般都在主页上面显示

用户名在登录中输入
在主页 home组件当中显示

组件传值 vuex中最合适
*/
</script>

<style lang="scss" scoped>
    .home_wrap{
        display: flex;
        justify-content: space-between;
        // font-size: 10px;
        .left{
            display: flex;
            align-items: center;
            font-size: 10px;
            font-weight: 700;
            img{
                width: 40px;
                height: 40px;
            }
            .pingtai{
                display: flex;
                align-items: center;
            }
        }
        .right{
            font-size: 12px;
            display: flex;
            align-items: flex-end;
            .list{
                display: flex;
                li{
                    padding-left: 35px;
                    padding-bottom: 10px;
                }
            }
        }
    }
</style>